<template>
  <div class="editor-container">
    <div class="editor-header">
      <span><a class="action" @click="toBack">返回</a>| {{curEditFile.curEditFile.fileName}}</span>
      <div v-show="showEdit" class="action r" @click="doEdit">编辑</div>
      <div v-show="!showEdit" class="r">
        <span class="action" @click="doEditSave">保存</span>
        <span class="action" @click="doEditCancle">取消</span>
      </div>
    </div>
    <div class="code-eidtor">
      <div class="code-eidtor">
        <div id="container" style="width:100%;height:700px;border:1px solid #ccc"></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import * as monaco from 'monaco-editor'
export default {
  data () {
    return {
      editor: '',
      fileContent: '',
      showEdit: true
    }
  },
  methods: {
    // 返回
    toBack () {
      this.$router.back(-1)
    },
    // 点击编辑
    doEdit () {
      this.showEdit = false
      this.editor.updateOptions({ readOnly: false })
    },
    // 点击编辑保存
    doEditSave () {
      let blob = new Blob([this.editor.getValue()], { type: 'application/octet-stream' })
      let fd = new FormData()
      fd.append('dir', this.curEditFile.curFilePath)
      // fd.append('userId', this.userId)
      fd.append('name', this.curEditFile.curEditFile.fileName)
      fd.append('file', blob, this.curEditFile.curEditFile.fileName)
      let url = `/gateway/fileCenter/api/file/upload`
      axios({
        method: 'post',
        url: url,
        data: fd
      }).then(res => {
        this.editor.updateOptions({ readOnly: true })
        this.$message({ message: '保存成功', showClose: true, type: 'success' })
        this.$router.push({ path: '/filecenter' })
      })
    },
    // 点击编辑取消
    doEditCancle () {
      this.showEdit = true
      this.editor.updateOptions({ readOnly: true })
    },
    // 下载文件内容
    _getFileContent () {
      let separator = this.curEditFile.curFilePath === '/' ? '' : '/'
      let fileUrl = `/gateway/fileCenter/api/file/preview?path=${this.curEditFile.curFilePath + separator + this.curEditFile.curEditFile.fileName}`
      axios({
        method: 'get',
        url: fileUrl
      }).then(res => {
        this.fileContent = res.data
        if (typeof this.fileContent === 'object') {
          this.fileContent = JSON.stringify(this.fileContent, null, 2)
        }
        this.editor.setValue(this.fileContent)
      })
    }
  },
  mounted () {
    this._getFileContent()
    this.editor = monaco.editor.create(document.getElementById('container'), {
      value: '',
      language: 'python',
      readOnly: true
    })
  },
  computed: {
    ...mapGetters([
      'curEditFile'
    ])
  }
}
</script>

<style lang="stylus" scoped>
.editor-container
  width 100%
  position relative
  margin 0 auto
  max-width 1000px
  padding 20px 0
  background #ffffff!important
  .editor-header
    height 24px
    line-height 24px
    background-color #f7f7f7
    border 1px solid #ddd
    border-bottom none
    >span
      padding 0 10px
    .action
      padding-right 10px
      color #4285f4
      cursor pointer
  .code-eidtor
    border #ddd solid 1px
    margin-bottom 10px
    line-height 24px
</style>
